<template>
  <div class="main">
    <el-card class="box-card main">
      <template #header>
        <div class="card-header">
          <div class="alitem between">
            <div class="userInfo">
              <span>我的成绩：</span>
              <span>{{ userInfo.score }}分</span>
              <span>{{ userInfo.sgname }}</span>
              <span>{{ batchData.batch }}</span>
            </div>
            <div>
              <el-button @click="onClickSave">保存</el-button>
            </div>
          </div>
        </div>
      </template>
      <div v-if="zy_type == 1" class="classifyheader margintop">
        <div class="flex sizebg">
          <div style="margin-left: 25px" class="alitem">排序</div>
          <div style="margin-left: 44px" class="alitem">录取概率</div>
          <div style="margin-left: 39px" class="alitem">专业</div>
          <div style="margin-left: 180px" class="alitem">院校</div>
        </div>
        <div class="flex sizeinfo">
          <div class="alitem" style="margin-right: 10px">
            {{ year }}招生计划
          </div>
          <div style="width: 53px" class="center">历年</div>
          <div style="width: 90px" class="center">{{ year - 1 }}</div>
          <div style="width: 90px" class="center">{{ year - 2 }}</div>
          <div style="width: 90px" class="center">{{ year - 3 }}</div>
          <div style="margin-left: 60px; margin-right: 0px">操作</div>
        </div>
      </div>
      <div v-else class="classifyheader margintop">
        <div class="flex sizebg">
          <div style="margin-left: 27px" class="alitem">排序</div>
          <div style="margin-left: 44px" class="alitem">录取概率</div>
          <div style="margin-left: 44px" class="alitem">院校</div>
        </div>
        <div class="flex sizeinfo">
          <div class="alitem" style="margin-right: 10px">
            {{ year }}招生计划
          </div>
          <div style="width: 53px" class="center">历年</div>
          <div style="width: 90px" class="center">{{ year - 1 }}</div>
          <div style="width: 90px" class="center">{{ year - 2 }}</div>
          <div style="width: 90px" class="center">{{ year - 3 }}</div>
          <div style="margin-left: 75px; margin-right: 14px">操作</div>
        </div>
      </div>
      <sdVolunteerlist
        v-if="zy_type == 1"
        :status="status"
        style="margin-top: 10px"
      />
      <jsVolunteerlist
        v-else-if="zy_type == 2"
        :status="status"
        style="margin-top: 10px"
      />
      <scVolunteerlist v-else style="margin-top: 10px" :status="status" />
    </el-card>
  </div>
</template>
<script setup>
import jsVolunteerlist from '@/views/saveVolunteer/components/jsVolunteerlist.vue';
import scVolunteerlist from '@/views/saveVolunteer/components/scVolunteerlist.vue';
import sdVolunteerlist from '@/views/saveVolunteer/components/sdVolunteerlist.vue';
import { useRoute, useRouter } from 'vue-router';
import { zySave } from '@/api/volunteer/volunteer';
import { useStore } from 'vuex';
import { ref } from 'vue';

// 路由信息
const router = useRouter();
// 路由信息
const route = useRoute();
// 仓库
const store = useStore();
// const volunteerStore = volunteersStore()

const year = ref('');
const zy_type = ref(''); // 志愿表类型 1-山东 2-江苏 3-四川
const batchData = ref({}); // 批次信息
const userInfo = store.getters.user.userInfo; // 学生数据
const status = ref(1); // 志愿表状态 0-已过期， 1-未过期

init();
function init() {
  let data = JSON.parse(route.query.data);
  zy_type.value = data.zy_type;
  year.value = data.year;
  batchData.value = data.batchData;

  let volunteerInfos = JSON.parse(localStorage.getItem('volunteerInfos'));

  store.dispatch('tianbao/setVolunteerInfos', volunteerInfos);
}

// 点击保存志愿表
function onClickSave() {
  let volunteerInfo = store.getters.tianbao.volunteerInfos;

  let rate = 0;

  if (zy_type.value == 3) {
    let keys = Object.keys(volunteerInfo);
    for (let key of keys) {
      const college = volunteerInfo[key].collegeData;
      rate = rate + Number(college.chance);
    }

    rate = (rate / keys.length).toFixed(0);
  } else {
    for (let volunteer of volunteerInfo) {
      rate = rate + Number(volunteer.chance);
    }

    rate = (rate / volunteerInfo.length).toFixed(0);
  }

  rate = rate + '%';

  let data = {};

  // "batchData":{"id":25,"provinceCode":37,"course":"综合","batch":"1段","score":444},"zy_type":"1","year":2025}

  data['score'] = userInfo.score;
  data['sgname'] = userInfo.sgname;
  data['course'] = batchData.value.course;
  data['copyfrom'] = 0;
  data['family'] =
    `${userInfo.score}分${userInfo.section ? ` ${userInfo.section}位` : ''} ${userInfo.sgname} ${batchData.value.batch}`;

  data['section'] = userInfo.section;
  data['batch'] = batchData.value.batch;
  data['createFrom'] = 0;
  data['zyType'] = 2;

  data['zy_type'] = zy_type.value;
  data['volunteerInfos'] = JSON.stringify(volunteerInfo);
  data['rate'] = rate;

  // if (userInfo.section.length > 0) {
  //   data['family'] =
  //     userInfo.score +
  //     '分 ' +
  //     userInfo.section +
  //     '位 ' +
  //     userInfo.sgname +
  //     ' ' +
  //     batchData.value.batch;
  // } else {
  //   data['family'] =
  //     userInfo.score + '分 ' + userInfo.sgname + ' ' + batchData.value.batch;
  // }

  // data['score'] = userInfo.score;
  // data['sgname'] = userInfo.sgname;
  // data['section'] = userInfo.section;
  // data['batch'] = batchData.value.batch;
  // data['zyType'] = 2;

  // data['zy_type'] = zy_type.value;
  // data['volunteerInfos'] = JSON.stringify(volunteerInfo);
  // data['rate'] = rate;
  zySave(data).then((ref) => {
    let body = JSON.stringify({
      index: ref.data.data.index,
      zy_type: zy_type.value,
    });
    router.push({
      path: '/saveVolunteer',
      query: {
        data: body,
      },
    });
  });
}
</script>
<style lang="scss" scoped>
.box-card {
  margin: 20px;
  width: auto;
  height: calc(100vh - 120px);
  overflow-y: auto;

  .tabs {
    color: #000000;
    font-weight: 600;
    cursor: pointer;
  }

  .active {
    color: #004cf7;
    font-weight: 600;
    cursor: pointer;
  }

  .card-header {
    font-size: 20px;
    font-weight: 600;
    color: #1d2129;
    padding: 10px;

    .userInfo {
      font-size: 15px;
      font-weight: 400;
      color: #1d2129;
      line-height: 16px;

      span {
        margin-left: 8px;
      }
    }

    .headerSize {
      color: #4e5969;
      font-size: 14px;
      margin-left: 12px;
      font-weight: 400;
      height: 20px;
      line-height: 21px;
    }
  }
}

.classifyheader {
  background: #fafafa;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: #86909c;
  letter-spacing: 0;
  line-height: 28px;
  padding-right: 30px;
}
</style>
